<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/util.js"></script>
    <link rel="stylesheet" href="index.css">
    <script>
        let nameStatus=false;
        let pwdStatus = false;
        let emailStatus=false;
        let andButton = null;
        window.onload = function (){
            andButton=$("addButton");
        }
        async function checkAdd(){
            let imgPath=null;
            let imgDiv =$("imgDiv");
            let inputs=imgDiv.getElementsByTagName("input");

            for (let i=0;i<inputs.length;i++){
                if (inputs[i].checked == true){
                    imgPath =inputs[i].value;
                    break;
                }
            }
            var info=  await ajaxGet("/user/add",{
                name:$("name").value,
                pwd:$("pwd").value,
                email:$("email").value,
                imgPath
            });
            if (info == "ok"){
                location.href ="/html/show.html";
            }else {
                alert("注册失败");
            }
        }
        //检查用户名
        async function checkName(){
          let info = await ajaxGet("/user/findByName",{name:$("name").value});
          if (info != ""){
              $("nameSpan").style.color="red";
              $("nameSpan").innerHTML="用户已存在或用户名不能为空";
              nameStatus=false;
              andButton.disabled = true;
          }else {
              $("nameSpan").style.color="green";
              $("nameSpan").innerHTML="✔";
              nameStatus=true;
          }
          if (nameStatus && pwdStatus &&  emailStatus){
              andButton.disabled =false;
          }else {
              andButton.disabled =true;
          }
        }

        //检查密码
        function checkPwd(){
            let pwd = $("pwd");
            let pwd2 = $("pwd2");
            let userPwdSpan = $("userPwdSpan");
            let pwdSpan = $("pwdSpan");
            if (pwd.value =="" || pwd2.value ==""){
                $("pwdSpan").style.color="red";
                $("pwdSpan").innerHTML ="";
                $("userPwdSpan").innerHTML ="";
                pwdStatus=false;
                andButton.disabled = true;
                return;
            }
            if (pwd.value != pwd2.value){
                $("pwdSpan").style.color="red";
                $("pwdSpan").innerHTML ="两次输入密码不一致";
                pwdStatus=false;
                andButton.disabled = true;
                return;
            }else {
                $("pwdSpan").style.color="green";
                $("pwdSpan").innerHTML="✔";
                pwdStatus=true;
            }
            if (nameStatus && pwdStatus &&  emailStatus){
                andButton.disabled =false;
            }else {
                andButton.disabled =true;
            }
        }
        //检查邮箱
        async function checkEmail() {
            let email = $("email");
            let rex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/;
            if (email.value =="") {
                $("emailSpan").style.color = "red";
                $("emailSpan").innerHTML = "邮箱不能为空";
                emailStatus = false;
                andButton.disabled = true;
                return;
            }
            if (rex.test(email.value) == false) {
                $("emailSpan").style.color = "red";
                $("emailSpan").innerHTML = "邮箱格式不正确，邮箱格式为：aa@bb.com";
                emailStatus = false;
                andButton.disabled = true;
                return;
            }  else {
                $("emailSpan").style.color = "green";
                $("emailSpan").innerHTML = "✔";
                emailStatus = true;
            }
            if (nameStatus && pwdStatus &&  emailStatus){
                andButton.disabled =false;
            }else {
                andButton.disabled =true;
            }
        }

    </script>
    <style>
        #imgDiv img{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<div id="addDiv">
    <div class="showsDiv">
        <span style="margin-left: 800px;color: white">新用户注册</span>
    </div>
    <div id="addInfoDiv">
        <div style="width: 350px; margin-left: 100px">
            <br>
            用 户 名： 请输入1-10个字符&emsp;&emsp;<input type="text" id="name" onblur="checkName()"><span id="nameSpan"></span><br>
            用户密码： 请输入1-10个字符&emsp;&emsp;<input type="password" id="pwd" onblur="checkPwd()"><span id="userPwdSpan"></span><br>
            密码确认： 请输入1-10个字符，两次密码相同<input type="password" id="pwd2" onblur="checkPwd()"><span id="pwdSpan"></span><br>
            用户邮件： 形如aa@bb.com &emsp;&emsp;  <input type="email" id="email" onblur="checkEmail()"><span id="emailSpan"></span><br>
            <br>
            <span style="font-weight: bold">用户头像：</span><br>
        </div>
    </div>


    <div id="imgDiv" style="display: flex">
        <input type="radio" name="face" value="/html/face/1.jpg" checked>
        <img src="/html/face/1.jpg">
        <input type="radio" name="face" value="/html/face/2.jpg">
        <img src="/html/face/2.jpg">
        <input type="radio" name="face" value="/html/face/3.jpg">
        <img src="/html/face/3.jpg">
        <input type="radio" name="face" value="/html/face/4.jpg">
        <img src="/html/face/4.jpg">
        <input type="radio" name="face" value="/html/face/5.jpg">
        <img src="/html/face/5.jpg">
    </div>


    <div class="countDiv">
        <input style="margin-left: 340px" type="button" disabled value="注册" id="addButton" onclick="checkAdd()">
        <input style="margin-left: 50px" type="button" value="重置"  onclick="resetAll()">
    </div>
</div>
</body>
</html>